<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-color.js - hash</title>
<style type="text/css">@import url(../README.css);</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="../uupaa-color.js"></script>
<style type="text/css">
html, body {
  margin: 0; padding: 0;
  text-shadow: 3px 3px 5px red;
  font-size: small;
}
#div1 { width: 300px; height: 100px; border: 3px outset gray; padding: 3px; }
#span1 { background-color: white; color: black; }
</style>
</head>
<body>
<!--
<input type="button" value="#000" onclick="set(uu.color('#000'))" />
<input type="button" value="#111" onclick="set(uu.color('#111'))" />
 -->
<input type="button" value="#9aB" onclick="set(uu.color('#9aB'))" />
<!--
<input type="button" value="#FFF" onclick="set(uu.color('#FFF'))" />
<input type="button" value="#000000" onclick="set(uu.color('#000000'))" />
<input type="button" value="#121314" onclick="set(uu.color('#121314'))" />
 -->
<input type="button" value="#090a0B" onclick="set(uu.color('#090a0B'))" />
<!--
<input type="button" value="#FFFFFF" onclick="set(uu.color('#FFFFFF'))" />
<br />
 -->
<input type="button" value="Red" onclick="set(uu.color('Red'))" />
<input type="button" value="ToMato" onclick="set(uu.color('ToMato'))" />
<input type="button" value="transparent" onclick="set(uu.color('transparent'))" />
<input type="button" value="rgb(255, 255, 255)" onclick="set(uu.color('rgb(255, 255, 255)'))" />
<!--
<input type="button" value="rgb ( 100 , 100 , 100 )" onclick="set(uu.color('rgb ( 100 , 100 , 100 )'))" />
 -->
<input type="button" value="rgba(10.0%,11.23%,0.0%,1.0)" onclick="set(uu.color('rgba(10.0%,11.23%,0.0%,1.0)'))" />
<input type="button" value="rgba(0,100%,255,1.0)" onclick="set(uu.color('rgba(0,100%,255,1.0)'))" />
<!--
<br />
 -->
<input type="button" value="RGBAHash( { r: 255, g: 255, b: 255, a: 1.0 } )" onclick="set(uu.color({ r: 255, g: 255, b: 255, a: 1.0 }))" />
<input type="button" value="HSVAHash( { h: 0, s: 100, v: 100, a: 1.0 } )" onclick="set(uu.color({ h: 0, s: 100, v: 100, a: 1.0 }))" />
<input type="button" value="HSLAHash( { h: 120, s: 100, v: 50, a: 1.0 } )" onclick="set(uu.color({ h: 120, s: 100, l: 50, a: 1.0 }))" />
<!-- for debug
<hr />
Boundary condition Color:
<input type="button" value="rgb ( 100 , 100 , 100 , 1.0 )" onclick="set(uu.color('rgb ( 100 , 100 , 100 , 1.0 )'))" />
<input type="button" value="rgb ( 300 , 300 , 300 , 3.0 )" onclick="set(uu.color('rgb ( 300 , 300 , 300 , 3.0 )'))" />
<input type="button" value="rgba(0.00%,101.23%,256,1.0)" onclick="set(uu.color('rgba(0.00%,101.23%,256,1.0)'))" />
<hr />
Invalid Color:
<input type="button" value="#" onclick="set(uu.color('#'))" />
<input type="button" value="#0" onclick="set(uu.color('#0'))" />
<input type="button" value="#AA" onclick="set(uu.color('#AA'))" />
<input type="button" value="#AAAA" onclick="set(uu.color('#AAAA'))" />
<input type="button" value="#AAAAA" onclick="set(uu.color('#AAAAA'))" />
<input type="button" value="#RGB" onclick="set(uu.color('#RGB'))" />
<input type="button" value="#red" onclick="set(uu.color('#red'))" />
<input type="button" value="rgb ( -100 , +100 , 100.1 , -2.0 )" onclick="set(uu.color('rgb ( -100 , +100 , 100.1 , -2.0 )'))" />
<hr />
 -->
<div id="div1"><span id="span1">COLOR</span></div>
<script>
function set(color) {
  var c = uu.color(color);
  var hex = c.hex();
  document.getElementById("div1").style.backgroundColor = c.hex();
  document.getElementById("span1").innerHTML = c.hex() + "<br />" + c.rgba() + "<br />" + c.hsva() + "<br />" + c.hsla();
}
</script>
</body>
</html>
